<template>
  <teleport to="body">
    <div class="modal-backrop"></div>
      <div class="login">
         <div class="content">
          <div class="exit" @click="close">
            <div class="exit-btn">
              <img src="@img/exit.png" alt="">
            </div>
          </div>
          <ul class="loginOptions">
            <li
              v-for="item in loginTabs"
              :key="item.id"
              @click="tabs(item)"
              :class="{ active: loginIndex === item.id }"
            >
              {{ item.name }}
            </li>
          </ul>
          <component :is="comp"></component>
         </div>
      </div>
  </teleport>
</template>
<script setup lang="ts">
import { ref, markRaw } from 'vue'
// const props = defineProps({
//   isModal: {
//     type: Boolean,
//     default: false
//   }
// })
// const emit = defineEmits()
import router from '@router'
const close = () => {
  router.app.config.globalProperties.$hideLoginDialog()
}
let loginTabs = ref([
  {id: 0, name: '扫码登录', label: markRaw(wechat)},
  {id: 1, name: '验证码登录', label: markRaw(phone)},
  {id: 2, name: '密码登录', label: markRaw(password)},
])
import wechat from '@components/login/wechat.vue'
import phone from '@components/login/phone.vue'
import password from '@components/login/password.vue'
let loginIndex = ref(1)
let comp = ref(phone)
const tabs = (item) => {
  loginIndex.value = item.id
  comp.value = item.label
  console.log('comp.value:', comp.value)
}
</script>
<style scoped>
.modal-backrop {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1000;
  background-color: black;
  opacity: .7;
}
.login {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 500px;
  height: 430px;
  background-color: #fff;
  border-radius: 41px 41px 41px 41px;
  z-index: 1100;
  padding-top: 25px;
  padding-bottom: 15px;
  box-shadow: 0 12px 24px 0 rgba(28, 31, 33, .1);
}
.content{
  padding: 12px 28px;
  .exit{
    width: 100%;
    height: 18px;
    display: flex;
    justify-content: right;
    align-items: center;
    .exit-btn{
      width: 18px;
      height: 18px;
      cursor: pointer;
      img{
        width: 100%;
        height: 100%;
      }
    }
  }
  .loginOptions{
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: rgba(250,240,240,.8);
    li{
      flex: 1;
      height: 46px;
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;
    }
    .active{
      height: 46px;
      background: #c90000;
      border-radius: 9px;
      color: #fff;
    }
  }
}
</style>